<template>
	<view class="staffdetail">
		<view class="nav_bar">
			<uni-nav-bar left-icon="left" title="员工详情" right-icon="plus" :border='false' :fixed="true" @clickLeft="back"
				@clickRight="show_staff = true"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="content">
			<view class="card flex_center">
				<view class="image" @click="$native.toUser(info.provider_info.provider_id)">
					<image :src="data.avatar" mode="aspectFill"></image>
				</view>
				<view class="left">
					<view class="name hidden">
						{{data.name || data.nickname}}
					</view>
					<view class="num flex_r_between">
						<text>总订单:{{ info.all_order ? info.all_order.num : 0 }}单</text>
						<text>总金额:{{ info.all_order ? info.all_order.price : 0 }}元</text>
					</view>
				</view>
			</view>

			<view class="time flex_r_between">
				<view class="time_title">时间筛选</view>
				<view class="time_select flex_center">
					<view class="time_item" @click="openStart">{{ start ? $u.timeFormat(start, 'yyyy-mm-dd') : '请选择' }}
					</view>
					<view class="line"></view>
					<view class="time_item" @click="openEnd">{{ end ? $u.timeFormat(end, 'yyyy-mm-dd') : '请选择' }}</view>
				</view>
			</view>

			<view class="table">
				<view class="tr flex_center">
					<view class="th"></view>
					<view class="th">数量</view>
					<view class="th">金额(元)</view>
				</view>
				<view class="tr flex_center">
					<view class="th">总订单</view>
					<view class="td">{{info.order_num ? (info.order_num.num || 0) : 0}}</view>
					<view class="td">{{info.order_num ? (info.order_num.price || 0) : 0}}</view>
				</view>
				<view class="tr flex_center">
					<view class="th">接单</view>
					<view class="td">{{info.taking_num ? (info.taking_num.num || 0) : 0}}</view>
					<view class="td">{{info.taking_num ? (info.taking_num.price || 0) : 0}}</view>
				</view>
				<view class="tr flex_center">
					<view class="th">成交</view>
					<view class="td">{{info.finish_num ? (info.finish_num.num || 0) : 0}}</view>
					<view class="td">{{info.finish_num ? (info.finish_num.price || 0) : 0}}</view>
				</view>
				<view class="tr flex_center">
					<view class="th">退单</view>
					<view class="td">{{info.return_num ? (info.return_num.num || 0) : 0}}</view>
					<view class="td">{{info.return_num ? (info.return_num.price || 0) : 0}}</view>
				</view>
				<view class="tr flex_center">
					<view class="th">纠纷</view>
					<view class="td">{{info.complaint ? (info.complaint.num || 0) : 0}}</view>
					<view class="td">{{info.complaint ? (info.complaint.price || 0) : 0}}</view>
				</view>
			</view>
		</view>


		<!-- 添加员工弹窗 -->
		<!-- add_staff_bg -->
		<u-popup :safeAreaInsetBottom="false" :show="show_staff" mode="center" bgColor="transparent" @close="show_staff = false">
			<view class="addStaff flex_c">
				<input type="text" v-model="mobile" placeholder="请输入员工手机号" placeholder-class="input-placeholder" />
				<view class="btn_view" @click="addStaff">继续添加</view>
				<view class="close" @click="show_staff = false">
					<u-icon name="close-circle" color="#FFF" size="28"></u-icon>
				</view>
			</view>
		</u-popup>

		<u-datetime-picker :show="start_show" mode="date" :maxDate="now" :closeOnClickOverlay="true"
			@close="start_show = false" @cancel="start_show = false" @confirm="confirmStart"></u-datetime-picker>

		<u-datetime-picker :maxDate="now" :minDate="start" :show="end_show" mode="date" :closeOnClickOverlay="true"
			@close="end_show = false" @cancel="end_show = false" @confirm="confirmEnd"></u-datetime-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				info: {},

				show_staff: false,
				// 员工手机号
				mobile: '',

				start_show: false,
				end_show: false,

				start: 0,
				end: 0,
				now: 0,

			}
		},
		methods: {
			// 获取员工订单详情
			getData() {
				this.$get('/store.store/getStaffData', {
					"provider_id": this.data.id,
					"time": this.start && this.end ? `${uni.$u.timeFormat(this.start, 'yyyy-mm-dd')} - ${uni.$u.timeFormat(this.end, 'yyyy-mm-dd')}` : '',
				}).then(res => {
					this.info = res.data
				});
			},
			back() {
				uni.navigateBack()
			},

			addStaff() {
				this.$get('/store.store/signStaff', {
					mobile: this.mobile
				}).then(res => {
					this.show = false;
					this.$util.msg(res.msg)
				})
			},

			confirm(e) {
				this.start = e.range.data[0];
				this.end = e.range.data[e.range.data.length - 1];
				this.getData();
			},

			openStart() {
				this.start_show = true;
			},

			openEnd() {
				if (!this.start) {
					return this.$util.msg('请先选择开始时间');
				}
				this.end_show = true;
			},

			confirmStart(e) {
				this.start = e.value;
				this.start_show = false;
				if(this.end){
					this.getData();
				}
			},

			confirmEnd(e) {
				this.end = e.value;
				this.end_show = false;
				this.getData();
			},
		},

		onLoad(option) {
			this.data = JSON.parse(option.data);
			this.now = new Date().getTime();
			this.getData();
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 40rpx 32rpx;
	}

	.card {
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 0rpx 0rpx #ECECED;
		border-radius: 24rpx;
		border: 2rpx solid #ECECED;
		padding: 32rpx;

		.image {
			background: #D8D8D8;
			width: 128rpx;
			height: 128rpx;
			border-radius: 8rpx;
			overflow: hidden;
			margin-right: 20rpx;

			image {
				width: 128rpx;
				height: 128rpx;
			}
		}

		.left {
			flex: 1;
			overflow: hidden;

			.name {
				font-size: 28rpx;
				color: #131313;
				margin-bottom: 26rpx;
			}

			.num {
				text {
					font-size: 28rpx;
					color: #131313;
				}
			}
		}
	}

	.time {
		margin: 34rpx 0 32rpx;

		.time_title {
			width: 160rpx;
			height: 56rpx;
			background: #FFEFF2;
			border-radius: 16rpx;
			border: 2rpx solid #FD2A53;
			font-weight: 500;
			font-size: 28rpx;
			color: #FD2A53;
			line-height: 56rpx;
			text-align: center;
		}

		.time_select {
			.time_item {
				width: 224rpx;
				height: 56rpx;
				background: #FFEFF2;
				border-radius: 16rpx;
				border: 2rpx solid #FD2A53;
				font-weight: 500;
				font-size: 28rpx;
				color: #FD2A53;
				line-height: 56rpx;
				text-align: center;
			}

			.line {
				margin: 0 8rpx;
				width: 30rpx;
				height: 1rpx;
				background-color: #FD2A53;
			}
		}
	}

	.table {
		background: linear-gradient(180deg, #FFEFF2 0%, #FFFFFF 100%);
		border-radius: 24rpx;
		border: 4rpx solid #FFFFFF;

		.tr {
			height: 70rpx;
			border-bottom: 4rpx solid #FFFFFF;

			.th {
				flex: 1;
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
				text-align: center;
			}

			.td {
				flex: 1;
				font-size: 28rpx;
				color: #131313;
				text-align: center;
			}
		}
	}

	.addStaff {
		width: 640rpx;
		height: 553rpx;
		background: url('https://qiniu-cdn.maeiyun.com//h5static/store/add_staff_bg.png') 0 0 no-repeat;
		background-size: 100%;
		position: relative;

		input {
			font-size: 32rpx;
			color: #131313;
			width: 530rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx #DFDDF2;
			border-radius: 24rpx;
			padding: 0 32rpx;
			margin: 280rpx 0 24rpx;
			box-sizing: border-box;
		}

		.btn_view {
			width: 530rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

		.close {
			position: absolute;
			right: 0;
			top: 0;
		}
	}
</style>